import { useState } from "react";
import Dialog from "@mui/material/Dialog";
import "./index.scss";

export interface SimpleDialogProps {
  open: boolean;
  selectedValue: string;
  onClose: (value: string) => void;
}

const list: any = [];

for (let i = 0; i < 40; i++) {
  list.push({ id: i + 1 });
}

const Warehousr = (props: any) => {
  const { onClose, selectedValue, open } = props;

  // 声明一个仓库列表
  const [caseList] = useState(list);

  const handleClose = () => {
    onClose(selectedValue);
  };

  return (
    <Dialog maxWidth="xs" onClose={handleClose} open={open}>
      <div className="warehouse-dialog">
        <div className="title-box">
          背包
          <div className="close-btn" onClick={handleClose}>
            <img src="../images/close_x.png" />
          </div>
        </div>
        <div className="warehouse-content">
          <div className="case-list-box">
            <div className="list-box">
              <ul className="ul-list">
                {caseList.map((item: any) => (
                  <li key={item.id} className="li-box">
                    <div
                      className={
                        item.id == 1 || item.id == 2
                          ? item.id == 1
                            ? "case-box has lift"
                            : "case-box has"
                          : "case-box"
                      }
                    >
                      {item.id == 1 || item.id == 2 ? (
                        <img
                          className="dinosaur-img"
                          src="../images/dinosaur1.png"
                        />
                      ) : item.id < 8 ? (
                        <img
                          className="case-add"
                          src="../images/case_box_add.png"
                        />
                      ) : (
                        <img className="lock" src="../images/lock.png" />
                      )}
                      <div className="grade">34</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
            <div className="case-bottom-box">
              <div className="btn-center">
                <div className="title">确认使用</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </Dialog>
  );
};
export default Warehousr;
